<script setup lang="ts">
	import { ref } from 'vue';
	import { DATA_MAIN_TABS } from '../../utils/data';
	import { mainHomePlaceholderStyle, mainHomeTabsHeaderStyle } from '../../utils/system';
	const tabIndex = ref(1)
	const handleChangeTabIndex = (index : number) => {
		tabIndex.value = index
	}
	const showDrawer = ref(false)
	const handleClickDrawer = () => {
		showDrawer.value = true
	}
	const handleChangeDrawer = (value : boolean) => {
		showDrawer.value = value
	}
	import { DATA_MAIN_EXPLORE_LOCATION } from "../../utils/data";
</script>

<template>
	<view>
		<!-- 关注发现宁波 -->
		<com-tabs-header :tabs="DATA_MAIN_TABS" :init-tab-index="1" @change="handleChangeTabIndex"
			class="com-tabs-header" :style="mainHomeTabsHeaderStyle()">
			<template #left>
				<uni-icons type="bars" size="25" color="#2e2e2e" @click="handleClickDrawer"></uni-icons>
			</template>
			<template #right>
				<i class="iconfont icon-a-searchbar_search"></i>
			</template>
		</com-tabs-header>
		<!-- 留白 -->
		<view :style="mainHomePlaceholderStyle()"></view>
		<!-- 分割线 -->
		<com-divider></com-divider>
		<!-- 关注 -->
		<business-main-favor v-if="tabIndex == 0"></business-main-favor>
		<!-- 发现 -->
		<business-main-home-explore v-if="tabIndex == 1"></business-main-home-explore>
		<!-- 宁波 -->
		<business-main-home-location v-if="tabIndex == 2" style="flex: 1; overflow: scroll;">
		</business-main-home-location>
		<!-- 抽屉侧边栏 -->
		<com-drawer :show="showDrawer" @change="handleChangeDrawer">
			<template #drawer>
				<business-main-home-aside></business-main-home-aside>
			</template>
		</com-drawer>
	</view>
</template>

<style lang="scss">
	@import "@/static/font/iconfont.css";

	.com-tabs-header {
		background-color: white;
		position: absolute;
		top: 0;
		z-index: 20;
		width: 100vw;
	}

	.icon-a-searchbar_search {
		color: #909090;
		font-size: 35rpx;
		margin-bottom: 10rpx;
	}

	.placehoder {
		height: 300rpx;
		width: 300rpx;
		background-color: #909090;
	}
</style>